<template>
  <div>
    <Selector></Selector>
    <el-card class="box-card">
      <div v-if="isShowAttrlist">
        <div slot="header" class="clearfix">
          <el-button
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="toAddAttr"
            >添加属性</el-button
          >
        </div>
        <el-table stripe style="width: 100%" border :data="AttrList">
          <el-table-column type="index" label="序号" width="180" align="center">
          </el-table-column>
          <el-table-column prop="attrName" label="属性名称" width="180">
          </el-table-column>
          <el-table-column prop="address" label="属性列表" width="588px">
            <template v-slot="{ row }">
              <el-tag
                v-for="attr in row.attrValueList"
                :key="attr.id"
                size="small"
                style="margin-left: 5px; margin-bottom: 5px"
                >{{ attr.valueName }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row, $index }">
              <el-tooltip content="编辑" placement="top">
                <el-button
                  icon="el-icon-edit"
                  type="warning"
                  size="small"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除" placement="top">
                <el-button
                  icon="el-icon-delete"
                  type="danger"
                  size="small"
                  @click="toDelAttr(row)"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div v-else>
        属性名：<el-input style="width: 20%; margin-bottom: 15px" v-model="attrInfo.attrName"></el-input>
        <div style="margin-bottom: 15px; margin-left: 15px">
          <el-button
            icon="el-icon-plus"
            type="primary"
            size="small"
            @click="toAddAttrInfo"
            >添加属性值</el-button
          >
          <el-button type="warning" size="small">取消</el-button>
        </div>
        <el-table
          :data="attrInfo.attrInfolist"
          border
          style="width: 100%; margin-bottom: 16px"
        >
          <el-table-column type="index" label="序号" width="180" align="center">
          </el-table-column>
         <el-table-column label="属性名称">
          <template v-slot="{row,$index}">
            123
          </template>
         </el-table-column>
          <el-table-column prop="address" label="操作">
            <template v-slot="{ row }">
              <el-tooltip content="删除">
                <el-button
                  type="danger"
                  icon="el-icon-delete"
                  size="small"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div style="margin-left: 20px">
          <el-button type="primary" size="small">保存</el-button>
          <el-button type="warning" size="small">取消</el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import Selector from "@/components/Seletor";
import { mapState } from "vuex";
import { reqAttrlist, reqDelAttr } from "@/api/product/Attr";
import opp from "@/store/modules/opp";
export default {
  name:'attr',
  components: {
    Selector,
  },
  data() {
    return {
      AttrList: [],
      isShowAttrlist: true,
      inputRef: '',
      attrInfo: {
        valueName: "",
        attrInfolist: [],
        cartgoryId: 0,
        categoryLevel: 3,
      },
    };
  },
  methods: {
    //获取属性列表属性的业务函数
    async getAttrList() {
      console.log(1);
      const result = await reqAttrlist({
        category1Id: opp.state.Category1Id,
        category2Id: opp.state.Category2Id,
        category3Id: opp.state.Category3Id,
      });
      console.log(result);
      if (result.code === 200) {
        this.AttrList = result.data;
      }
    },

    //删除某一条属性的业务函数
    async toDelAttr({ id }) {
      this.$confirm("此操作将永久删除该属性, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          await reqDelAttr(id);
          this.getAttrList();
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //添加属性的业务函数
    toAddAttr() {
      this.isShowAttrlist = false;
    },
    toAddAttrInfo() {
      this.attrInfo.attrInfolist.push({
        attrName: "",
        isShowInput: true,
        
      });
    },
  },

  computed: {
    ...mapState("opp", ["Category1Id", "Category2Id", "Category3Id"]),
    // category1Id: {
    //   get() {
    //     return this.Category1Id;
    //   },
    // },
    // category2Id: {
    //   get() {
    //     return this.Category2Id;
    //   },
    // },
    // category3Id: {
    //   get() {
    //     return this.Category3Id*1;
    //   },
    // },
  },
  watch: {
    // 如果 `question` 发生改变，这个函数就会运行
    Category3Id: function (newQuestion, oldQuestion) {
      console.log(111, "fff");
      if (!newQuestion) return;
      this.getAttrList();
    },
  },
};
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  margin: 20px 10px;
}
</style>